const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const html = require("html-webpack-plugin");

module.exports={
    mode:'development',
    entry:"./src/index.js",
    output:{
        filename:'index.[hash:4].js',
        path:path.resolve(__dirname,'dist')
    },
    plugins:[
        new CleanWebpackPlugin(),
        new html({
            title:"测试",
            template:"./public/index.html",
            filename:"index.html"
        }),
    ],
    module:{
        rules:[
            {
                test:/\.js$/,
                
                use:{
                    loader:"babel-loader",//单独使用该loader不会处理js兼容，只适用于加载
                    //预设 presets
                    //插件 plugins
                    //babel的配置 .babelrc babel.config.js options
                    options:{
                        presets:[
                            '@babel/preset-env'//告诉babel转译成哪个版本
                    ],
                    plugins:[
                        //@babel/runtime-corejs3 负责重写原型上的方法
                        //runtime 全家桶？？
                        //@babel/plugin-proposal-class-properties 可以让我们辨析class的高级语法
                        ["@babel/plugin-proposal-class-properties",{ "loose" : true }],
                        ["@babel/plugin-proposal-decorators",{ "legacy": true }],//处理装饰器
                        ["@babel/plugin-transform-runtime",{corejs:3}]//选择corejs的版本一般是3
                     ]
                    },
                   
                },
                include:path.resolve(__dirname,'src'),
                exclude:path.resolve(__dirname,"node_modules"),//优化 排除node_modules中的代码
            },

        ]
    },
  devtool:"cheap-module-source-map",
  devServer:{
      port:8080,//起服务的端口 默认8080
      open:true,//自动打开浏览器
      hot:true,//热更新可以在不刷新页面的情况下更新对应的模块
      //hotOnly ,更新对应模块但是不刷新页面
        contentBase:'./static/'//把这个文件夹当做静态服务
  }
}